<template>
    <div id="advertisement" class="container">

            <div class="tab-handles">
                <ul>
                    <li class="handle" :class="{ active: tabIndex == 0 }"  @click="tabToggle(0)">出租车和平台发布</li>
                    <li class="handle" :class="{ active: tabIndex == 1 }" @click="tabToggle(1)">仅平台发布</li>
                </ul>
            </div>
            <div class="tab-content">
                <div v-show="tabIndex == 0" class="tap-panel">
                    <div class="block mt15">
                       <div class="content">
                            <textarea></textarea>
                       </div>
                        <div class="lables">
                            <span>行业发布:</span>
                            <span>休闲娱乐</span>
                            <span>租赁</span>
                            <span>二手车</span>
                            <span>餐饮</span>
                            <span>婚庆</span>
                            <span>快销品</span>
                            <span>公告</span>
                            <span>乔迁</span>
                            <span>生日祝福</span>
                            <span>寻人启事</span>
                            <span>开业庆典</span>
                            <span>企业推广</span>
                            <span>旅游活动</span>
                            <span>等等</span>
                        </div>
                    </div>
                    <div class="block mt15 publish">
                        <div class="item clearfix">
                            <h4>发布日期</h4>
                            <time class="time" @click="openPicker">{{getPickerValue}}</time>
                        </div>
                        <div class="item selectCombo">
                            <h4>选择套餐</h4>
                            <ul class=" clearfix">
                                <li v-for="item in selectCombo">
                                    {{item}}
                                </li>
                            </ul>
                        </div>
                        <div class="item clearfix">
                            <h4>发布途径</h4>
                            <p>镇江1500辆出租车LED显示屏</p>
                        </div>
                        <div class="item clearfix">
                            <h4>价格</h4>
                            <p class="price">￥ 20</p>
                        </div>
                    </div>
                </div>
                <div v-show="tabIndex == 1" class="tap-panel">
                    <div class="block mt15">
                        <div class="content">
                            <textarea></textarea>
                        </div>
                        <div class="lables">
                            <span>行业发布:</span>
                            <span>休闲娱乐</span>
                            <span>租赁</span>
                            <span>二手车</span>
                            <span>餐饮</span>
                            <span>婚庆</span>
                            <span>快销品</span>
                            <span>公告</span>
                            <span>乔迁</span>
                            <span>生日祝福</span>
                            <span>寻人启事</span>
                            <span>开业庆典</span>
                            <span>企业推广</span>
                            <span>旅游活动</span>
                            <span>等等</span>
                        </div>
                    </div>
                    <div class="block mt15 publish">
                        <div class="item clearfix">
                            <h4>发布日期</h4>
                            <time class="time" @click="openPicker">{{getPickerValue}}</time>
                        </div>
                        <div class="item selectCombo">
                            <h4>选择套餐</h4>
                            <ul class=" clearfix">
                                <li v-for="item in selectCombo">
                                    {{item}}
                                </li>
                            </ul>
                        </div>
                        <div class="item clearfix">
                            <h4>发布区域</h4>
                            <p>镇江</p>
                        </div>
                        <div class="item clearfix">
                            <h4>价格</h4>
                            <p class="price">￥ 20</p>
                        </div>
                    </div>
                </div>
            </div>
            ​<datetime-picker
                ref="picker"
                type="date"
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                v-model="pickerValue">
            </datetime-picker>
            <p class="agreement" ><input id="agreement" type="checkbox"><label for="agreement">同意遵守平台发布规范</label></p>
            <div class="btn">提交预览</div>
        <foot-menu></foot-menu>
    </div>
</template>

<style lang="scss" scoped>
    .container {
        margin-top: 0;
        padding-bottom: 0.4rem;
    }
    #advertisement{
            .btn{
                display: block;
                background-color: #6bd968;
                color: #ffffff;
                text-align: center;
                height: 2rem;
                line-height: 2rem;
                font-size: 0.8rem;
                margin: 0 0.6rem 1rem;
                border-radius: .2rem;
            }
            .agreement{
                margin:0.6rem;
                input,label{
                    vertical-align: bottom;
                }
                label{margin-left: 0.3rem;color: #0088cc}
            }
    }

    .tab-handles{
        height: 2.8rem;

        .handle{
            width: 50%;
            height: 2.8rem;
            float: left;
            background-color: #ffffff;
            color: #13BC13;
            font-size: 0.85rem;
            text-align: center;
            line-height: 2.8rem;
            font-weight: 600;
            box-sizing: border-box;
        }

        .handle.active{
            border-bottom: 2px solid #13BC13;
        }
    }

    .tab-content .content{
        border-bottom: 0.05rem solid #000000;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
       margin-left: 0.6rem;
        textarea{
            display: block;
            width: 14.8rem;
            height: 4rem;
            resize: none;
            box-sizing: border-box;
        }
    }
    .lables{
        padding: 0.6rem;
    }
    .lables span{
        display: inline-block;
        color: #94b492;
        background-color: #E1F8E0;
        padding: 0.1rem 0.15rem;
        font-size: 0.6rem;
        line-height: 0.7rem;
        margin: 0.1rem;
        border-radius: 0.1rem;
    }
    .lables span:first-child{
        color: #8AAD89;
        background-color: transparent;
        font-weight: 600;
        font-size: 0.7rem;
    }
    .publish{
        padding-left: 0.6rem;

        .item{
            padding-right:0.6rem;
            h4,.time,p{
                line-height: 1.4rem;
                font-size: 0.8rem;
                font-family: "微软雅黑";

            }
            h4{
                float: left;

            }
            p,.time{
                float: right;
                font-size: 0.7rem;
            }
            p{
                font-size: 0.6rem;
                color: #999999;
            }
            .price{
                font-size: 0.7rem;
                font-weight: 600;
                color: #ff6c14;

            }

        }
        .selectCombo{
            h4{
                margin-bottom: 0.2rem;
            }
            ul{
                margin:-0.2rem;
                li{
                    font-size: 0.7rem;
                    display: inline-block;
                    padding: 0.3rem 0.25rem;
                    margin: 0.2rem;
                    background-color: #f5f5f5;
                    color: #999999;
                    box-sizing: border-box;
                    font-weight: 600;
                    font-family: "微软雅黑";
                    &.active{
                         background-color: #6bd968;
                         color: #ffffff;
                     }
                }
            }
        }
    }

</style>

<script>
    import footMenu from '../../components/footer/footMenu.vue'
    import { DatetimePicker } from 'mint-ui';
    import {mapGetters, mapActions} from "vuex";
    export default {
        data() {
            return {
                tabIndex:0,
                pickerValue:"2017-06-18",
                selectCombo:[
                    "11:00-21:00",
                    "12:00-12:00",
                    "13:00-13:00",
                    "14:00-14:00",
                    "15:00-14:00",
                    "16:00-16:00"
                ]
            }
        },
        components: {
            footMenu,
            DatetimePicker
        },
        mounted() {


        },
        computed: {
            getPickerValue(){
                let week=[
                    "星期天",
                    "星期一",
                    "星期二",
                    "星期三",
                    "星期四",
                    "星期五",
                    "星期六"
                ]
                let date= new Date(this.pickerValue)
                let nowYear =date.getFullYear()
                let nowMonth =date.getMonth()+1
                let nowDate =date.getDate()
                return nowYear+"年"+nowMonth+"月"+nowDate+"日"+ week[new Date(nowYear+'/'+nowMonth+'/'+nowDate).getDay()]
            }

        },
        methods: {
            tabToggle(i){
//              console.log(i)
                console.log(i)
                this.tabIndex=i;
            },
            openPicker() {
                this.$refs.picker.open();
            },
            confirm(v){
                console.log("confirm")
                console.log(v)
            }


        },

    }
</script>
